const merge = require('webpack-merge');
const common = require('../webpack.config.js');
const webpack = require('webpack');
const PROJECT = require('./project.config.js');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');

module.exports = merge(common, {

    devtool: 'inline-source-map',
    //https://doc.webpack-china.org/configuration/dev-server    
    devServer: {
        //编译工作目录
        contentBase: PROJECT.PATH_DIST,
        //
        progress: true,
        open: true,
        // 启用gzip压缩
        compress: true,
        // 告诉服务器从哪里提供内容
        contentBase: PROJECT.PATH_SRC,
        // 当使用HTML5 History API，任意的 404 响应可以提供为 index.html 页面
        historyApiFallback: true,
        // 构建消息将会出现在浏览器控制台
        inline: true,
        // 告诉服务器监视那些通过 devServer.contentBase 选项提供的文件。文件改动将触发整个页面重新加载
        watchContentBase: true,
        // 与监视文件相关的控制选项
        watchOptions: {
            ignored: /node_modules/,
        },
        // 启用 webpack 的模块热替换特性
        hot: true,
        // 指定使用一个 host
        host: PROJECT.SERVER_HOST,
        // 指定要监听请求的端口号
        port: PROJECT.SERVER_PORT,
        // 遮罩层提示错误
        overlay: true,
        quiet: true,
        disableHostCheck: true
    },

    plugins: [
        // 用于模块热替换，适用于开发环境
        //https://doc.webpack-china.org/guides/hot-module-replacement
        new webpack.HotModuleReplacementPlugin(),
        // 第三方插件，优化提示效果
        // https://github.com/geowarin/friendly-errors-webpack-plugin
        new FriendlyErrorsPlugin(),
    ]
});